import React, { useRef } from 'react';
import Son from './son.js'

const ParentComponent = ()=>{


    const childRef = useRef()

    const handleFocus = ()=>{
        childRef.current?.focus()
    }

    const handleIncrement = ()=>{
        childRef.current?.increment();
    }

    const logCount = ()=>{
        console.log('子组件 count:',childRef.current?.getCount())
    }

    /**
     *   React不鼓励直接操作子组件，但是可以暴露子组件的特定方法
     *   1. 子组件：使用 forwardRef 和 useImperativeHandle
     *   2. 父组件：使用 useRef 获取子组件暴露的方法
     * **/
    return (
        <div>
            {/* 注意不能写成下面两种注释的字符串的方法 */}
            {/* <Son ref="childRef" /> */}
            {/* <Son ref="{childRef}" /> */}
            <Son ref={childRef} />
            <button onClick={handleFocus}>让子组件输入框聚焦</button>
            <button onClick={handleIncrement}>子组件计数 + 1</button>
            <button onClick={logCount}>打印子组件</button>
        </div>
    )
}

export default ParentComponent